import React from "react";
import { Swiper, Image } from "react-vant";
import { ListState } from "../../views/home";
import { useNavigate } from "react-router-dom";
import './style.scss'
interface TypeProps {
  item: ListState;
}

export const Right: React.FC<TypeProps> = ({ item }) => {
  const navigate = useNavigate();
  return (
    <div>
      <div className="banner">
        <Swiper>
          {item.banner.map((v, i) => {
            return (
              <Swiper.Item key={i}>
                <img src={v} alt="" />
              </Swiper.Item>
            );
          })}
        </Swiper>
      </div>
      <div className="list">
        {item.children.map((v) => {
          return (
            <dl key={v.id} onClick={() => navigate("/product")}>
              <dt>
                <img src={v.url} alt="" />
              </dt>
              <dd>
                <h5>{v.title}</h5>
              </dd>
            </dl>
          );
        })}
      </div>
    </div>
  );
};
